<template>
  <div>
    <el-checkbox-group v-model="newValue">
      <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
const cityOptions = ['七天无理由退货', '十大安全保证', 'ISO9001认证', '政府补助商品']
import { getDouHao } from '@/utils/util'
export default {
  props: {
    value: {
      type: String,
      required: false,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      cities: cityOptions
    }
  },
  computed: {
    newValue: {
      get() {
        return getDouHao(this.value, [])
      },
      set(value) { // set 在数组情况下生效，在对象情况下不生效？？？？？？ Why
        this.$emit('input', value.join(','))
      }
    }
  }
}
</script>

<style lang="scss" scoped>
    .el-form-item__content{
        display: flex;
        align-items: center;
        .el-button{
            margin-left: 10px;
        }
    }
   .el-form-item {
        margin-bottom: 22px;
    }
</style>
